<template>
  <div class="side-setting">
    <a-tabs default-active-key="1" tab-position="left">
      <a-tab-pane key="1" tab="RDP连接属性">
        <setting-item title="映射设置">
          <a-list :split="true">
            <a-list-item>
              启用设备映射
              <a-switch :checked="rdpSetting.enableDrive" slot="actions" @click="(checkd,event)=>(this.isCheckd(checkd,'enableDrive'))" size="small"/>
            </a-list-item>
            <a-list-item >
              设备名称
              <a-input v-model="rdpSetting.driveName" size="small" slot="actions" />
            </a-list-item>
            <a-list-item>
              映射路径
              <a-input v-model="rdpSetting.drivePath" size="small" slot="actions" />
            </a-list-item>
          </a-list>
        </setting-item>
        <setting-item title="连接画面设置">
          <a-list>
            <a-list-item>
              启用桌面墙纸
              <a-switch :checked="rdpSetting.enableWallpaper" slot="actions" @click="(checkd,event)=>(this.isCheckd(checkd,'enableWallpaper'))" size="small"/>
            </a-list-item>
            <a-list-item>
              启用桌面主题
              <a-switch :checked="rdpSetting.enableTheming" slot="actions" @click="(checkd,event)=>(this.isCheckd(checkd,'enableTheming'))" size="small"/>
            </a-list-item>
            <a-list-item>
              启用字体平滑（ClearType）
              <a-switch :checked="rdpSetting.enableFontSmoothing" slot="actions" @click="(checkd,event)=>(this.isCheckd(checkd,'enableFontSmoothing'))" size="small"/>
            </a-list-item>
            <a-list-item>
              启用全窗口拖拽
              <a-switch :checked="rdpSetting.enableFullWindowDrag" slot="actions" @click="(checkd,event)=>(this.isCheckd(checkd,'enableFullWindowDrag'))" size="small"/>
            </a-list-item>
            <a-list-item>
              启用桌面合成效果（Aero）
              <a-switch :checked="rdpSetting.enableDesktopComposition" slot="actions" @click="(checkd,event)=>(this.isCheckd(checkd,'enableDesktopComposition'))" size="small"/>
            </a-list-item>
            <a-list-item>
              启用菜单动画
              <a-switch :checked="rdpSetting.enableMenuAnimations" slot="actions" @click="(checkd,event)=>(this.isCheckd(checkd,'enableMenuAnimations'))" size="small"/>
            </a-list-item>
            <a-list-item>
              禁用位图缓存
              <a-switch :checked="rdpSetting.disableBitmapCaching" slot="actions" @click="(checkd,event)=>(this.isCheckd(checkd,'disableBitmapCaching'))" size="small"/>
            </a-list-item>
            <a-list-item>
              禁用离屏缓存
              <a-switch :checked="rdpSetting.disableOffscreenCaching" slot="actions" @click="(checkd,event)=>(this.isCheckd(checkd,'disableOffscreenCaching'))" size="small"/>
            </a-list-item>
            <a-list-item>
              禁用字形缓存
              <a-switch :checked="rdpSetting.disableGlyphCaching" slot="actions" @click="(checkd,event)=>(this.isCheckd(checkd,'disableGlyphCaching'))" size="small"/>
            </a-list-item>
          </a-list>
        </setting-item>
        <setting-item>
          <a-button @click="saveConfig('rdp')" type="primary" icon="save">保存</a-button>
          <a-button type="dashed" icon="redo" style="float: right">重置</a-button>
        </setting-item>
      </a-tab-pane>
      <a-tab-pane key="2" tab="SSH连接属性">
        <setting-item>
          <a-list>
            <a-list-item>
              配色方案
              <a-input v-model="sshSetting.colorScheme" slot="actions"  size="small"/>
            </a-list-item>
            <a-list-item>
              字体名称
              <a-input v-model="sshSetting.fontName" slot="actions" size="small"/>
            </a-list-item>
            <a-list-item>
              字体大小
              <a-input v-model="sshSetting.fontSize" slot="actions"  size="small"/>
            </a-list-item>
          </a-list>
        </setting-item>
        <setting-item>
          <a-button @click="saveConfig('ssh')" type="primary" icon="save">保存</a-button>
          <a-button type="dashed" icon="redo" style="float: right">重置</a-button>
        </setting-item>
      </a-tab-pane>
      <a-tab-pane key="3" tab="Guacd全局设置">
        Waitting
      </a-tab-pane>
    </a-tabs>

  </div>
</template>

<script>
import SettingItem from '../../../components/setting/SettingItem'
import {updateRdpProperties,updateSshProperties,getRdpProperties,getSshProperties} from '@/services/properties'

export default {
  name: 'Connect',
  components: {SettingItem},
  //i18n: require('./i18n'),
  data() {
    return {
      rdpSetting:{
        enableDrive:false,
        enableWallpaper:false,
        enableTheming:false,
        enableFontSmoothing:false,
        enableFullWindowDrag:false,
        enableDesktopComposition:false,
        enableMenuAnimations:false,
        disableBitmapCaching:false,
        disableOffscreenCaching:false,
        disableGlyphCaching:false,
        driveName:'',
        drivePath:''
      },
      sshSetting:{
        colorScheme:'',
        fontName:'',
        fontSize:''
      },
      guacdSetting:{},
    }
  },
  mounted() {
    this.loadConfig()
  },
  methods:{
    isCheckd(checkd,propertiesName){
        console.log(checkd,propertiesName);
        this.rdpSetting[propertiesName]=checkd;
    },
    saveConfig(configType){
      if(configType==='rdp'){
       // updateRdpProperties(
        let data = new FormData()
        for(let index in this.rdpSetting){
          data.append(index,this.rdpSetting[index].toString())
        }
        updateRdpProperties(data).then((res)=>{
          this.$message.success("保存配置成功！")
        })
      }else if(configType==='ssh'){
        let data = new FormData()
        for(let index in this.sshSetting){
          data.append(index,this.sshSetting[index].toString())
        }
        updateSshProperties(data).then((res)=>{
          this.$message.success("保存配置成功！")
        })
      }
    },
    loadConfig(){
      getSshProperties().then((res)=>{
        let data=res.data['properties']
        for(let index in data){
          if(this.isBool(data[index])){
            this.sshSetting[index]=this.toBool(data[index])
          }else{
            this.sshSetting[index]=data[index]
          }
        }
      })
      getRdpProperties().then((res)=>{
        let data=res.data['properties']
        for(let index in data){
          if(this.isBool(data[index])){
            this.rdpSetting[index]=this.toBool(data[index])
          }else{
            this.rdpSetting[index]=data[index]
          }
        }
      })
    },
    isBool(value){
      if(value==='true'||value==='false'){
        return true
      }else{
        return false
      }
    },
    toBool(value){
      if(value==='true'){
        return true
      }else{
        return false
      }
    }
  },
  computed: {
    //...mapState('setting', ['pageMinHeight']),
    desc() {
      return "连接设置"
    }
  }
}
</script>

<style scoped lang="less">
.side-setting {
  min-height: 100%;
  background-color: @base-bg-color;
  padding: 24px;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
  position: relative;

  .flex {
    display: flex;
  }

  .select-item {
    width: 80px;
  }
}
</style>